@use '../../design-system/' as *;

.question {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-fs-xl);
    line-height: var(--text-lh-xl);
    font-weight: var(--text-semibold);
    color: var(--color-text-secondary);
    
    @media screen and (max-width: $breakpoint-pricing-large) {
        text-align: left;
    }
}

.faqItem {
    padding-top: $spacing-size-8;
    padding-bottom: $spacing-size-6;
    border-bottom: 1px solid var(--color-border-secondary);
    color: var(--color-text-primary);
    cursor: pointer;
}

.answer {
    padding-top: $spacing-size-2;
    font-size: 17px;
    line-height: var(--text-lh-2xl);
    color: var(--color-text-secondary);
    opacity: 0.8;
    text-align: left;
}


.chevronDown {
    --icon-size: 24px;

    fill: transparent;
    stroke: var(--color-util-gray-400);
    transition: transform 0.3s ease-in-out;

    .isOpen & {
        transform: rotate(180deg);
    }
}

.faqItem {
    padding-top: $spacing-size-8;
    padding-bottom: $spacing-size-6;
    border-bottom: 1px solid var(--color-border-secondary);
    color: var(--color-text-primary);
}

@media screen and (max-width: $breakpoint-pricing-small) {
    .question {
        text-align: left;
    }
}
.faq {
    padding-top: $spacing-size-12;
}